<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜动态图</title>
    <script crossorigin="anonymous"
        integrity="sha512-pSyYzOKCLD2xoGM1GwkeHbdXgMRVsSqQaaUoHskx/HF09POwvow2VfVEdARIYwdeFLbu+2FCOTRYuiyeGxXkEg=="
        src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
    <style>
        .containter {
            margin: 0px auto;
            margin-top: 5vh;
            height: 600px;
            overflow: hidden;
            /* border: solid 1px #666; */
        }

        [v-cloak] {
            display: none;
        }

        .frr {
            display: flex;
        }

        .ac {
            align-items: center;
        }

        .fccc {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .zhou {
            width: 10px;
            height: calc(100% - 10px);
            background-color: #e5e5e5;
            margin-right: 20px;
        }

        .triangle-up {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 10px solid #e5e5e5;
        }

        .right {
            position: relative;
        }

        .right .item {
            position: absolute;
            color: #fff;
            height: 50px;
            left: 0px;
            overflow: hidden;
            box-sizing: border-box;
            border-radius: 5px;
            padding: 0px 15px;
            transition: all 0.5s;
        }

        .frb {
            display: flex;
            justify-content: space-between;
        }

        .btn-box {
            margin-left: 620px;
        }
    </style>
</head>

<body class="fccc">
    <h1>小米手机历代性能排行榜</h1>
    <div class="containter frr" :style="{width:(maxWidth+30)+'px'}" id="app">
        <div class="left">
            <div class="triangle-up"></div>
            <div class="zhou"></div>
        </div>
        <div class="right">
            <div class="item frb ac" v-for="(item, index) in showList" :key="item.id"
                :style="{top:item.top+'px',backgroundColor:item.color,width:item.width+'px'}">
                <span>{{item.title}}</span>
                <span>{{item.value}}</span>
            </div>
        </div>
    </div>
</body>
<script>
    // 整个dome只需要需要关注watchList 、 maxWidth 
    let timer;
    new Vue({
        el: "#app",
        data: {
            rankList: [],//数据列表
            showList: [],
            idList: [],
            maxWidth: 700,//最大宽度
            colorList: ['001219', '005f73', '0a9396', '94d2bd', 'e9d8a6', 'ee9b00', 'ca6702', 'bb3e03', 'ae2012', '9b2226', '8ecae6', '219ebc', '023047', 'ffb703', 'fb8500', 'f72585', 'b5179e'] //测试数据

        },
        mounted(){
            // rankList 格式
            // [{
            //     title: ""， 标题
            //     value: "" 值 y由大到小
            //     color:"" 颜色
            // }]
            const dataList =this.defaultData();
            this.watchList(dataList);
        },
        methods: {
            //追加值(数组、对象)都可以
            appendArr(data) {
                if(typeof data !="object") return false;
                if(data.length==undefined){
                  return this.rankList.push(this.appendProperty(data));
                }else if(data.length==0){
                    return false;
                }
                data=data.map(item=>{
                    return this.appendProperty(item);
                })
                clearInterval(timer);
                data=[...this.rankList,...data];
                this.watchList(data);
            },
            //启动 监听数据变化
            watchList(data) {
                data = data.map(item => {
                    return  this.appendProperty(item);
                })
                this.rankList=data;
                clearInterval(timer);
                timer = setInterval(() => {
                    if (this.rankList.length == 0) return false;
                    let item = this.rankList[0];
                    if (this.idList.includes(item.id)) return false;
                    this.showList.unshift(item);
                    this.idList.push(item.id);
                    setTimeout(() => {
                        this.setWidth();
                    }, 50)
                    this.rankList.splice(0, 1);
                }, 1000);
            },
            //追加属性
            appendProperty(obj) {
                obj.top = 0;
                obj.width = 0;
                obj.id = this.getId();
                return obj;
            },
            //更新每一项宽度
            setWidth() {
                const topWidth = this.showList[0].value;
                const maxWidth = this.maxWidth;
                this.showList = this.showList.map((item, index) => {
                    item.width = index >= 10 ? 0 : (item.value / topWidth) * maxWidth;
                    item.top = index * 60 + 10;
                    return item;
                })
            },
            //设置默认数据
            defaultData() {
                let temp = this.colorList.length;
                let arr = [];
                this.colorList.forEach((item, index) => {
                    arr.push({
                        title: "小米" + (index + 1),
                        color: '#' + item,
                        value: index == 0 ? parseInt(Math.random() * 100) : parseInt(arr[index - 1].value * (1 + this.getRandomNum()))
                    })
                });
                return arr;
            },
            getId() {
                return parseInt(Math.random() * 100) + '' + parseInt(Math.random() * 100) + '' + new Date().getTime();
            },
            getRandomNum() {
                let result = Math.random();
                if (result <= 0.3) {
                    return result;
                } else {
                    return this.getRandomNum();
                }
            }
        },
    })
</script>

</html>